<div class="layui-form" lay-filter="layadmin-myinvoice-typeinvatinvoiceform">
    <script type="text/html" template>
        <input type="hidden" name="id" value="{{ d.params.id || '' }}" />
    </script>
    <script type="text/html" template>
        <input type="hidden" name="myInvoiceId" value="{{ d.params.myInvoiceId || '' }}" />
    </script>
    <script type="text/html" template lay-done="layui.data.sendParams(d.params)">

    </script>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label">单据类型</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input" style="width:773px !important">
                <script type="text/html" template>
                    <select name="billType" id="ID-select-myinvoice-typeinvatinvoice-billtype" disabled>
                        <option value="">不限</option>
                        <option value="1" {{= d.params.invoiceType=="1"?'selected':'' }}>电子发票（普通发票）</option>
                        <option value="2" {{= d.params.invoiceType=="2"?'selected':'' }}>电子发票（增值税专用发票）</option>
                        <option value="3" {{= d.params.invoiceType=="3"?'selected':'' }}>电子发票（航空运输电子客票行程单）</option>
                    </select>
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>发票号码</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="invoiceNumber" placeholder="请输入发票号码" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required|number" value="{{ d.params.invoiceNumber || '' }}">
                </script>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>开票日期</label>
            <div class="layui-input-inline layui-input-wrap billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <div class="layui-input-prefix">
                        <i class="layui-icon layui-icon-date"></i>
                    </div>
                    <input type="text" name="issueDate" id="ID-laydate-typeinvatinvoice-issueDate" lay-verify="required|date" placeholder="请选择开票日期" autocomplete="off" class="layui-input" value="{{ d.params.issueDate || '' }}">
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>购方名称</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="payerName" placeholder="请输入购方名称" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required" value="{{ d.params.payerName || '' }}">
                </script>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>购方纳税人识别号</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="payerId" placeholder="请输入购方纳税人识别号" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required" value="{{ d.params.payerId || '' }}">
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>销方名称</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="sellerName" placeholder="请输入销方名称" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required" value="{{ d.params.sellerName || '' }}">
                </script>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>销方纳税人识别号</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="sellerId" placeholder="请输入销方纳税人识别号" autocomplete="off" class="layui-input" lay-affix="clear" lay-verify="required" value="{{ d.params.sellerId || '' }}">
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>总金额(不含税)</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="number" lay-affix="number" name="taxExclusiveTotalAmount" placeholder="" step="0.01" lay-precision="2" class="layui-input" lay-filter="calcAmount" lay-verify="required|number" value="{{ d.params.taxExclusiveTotalAmount || '0.00' }}">
                </script>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>总税额</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="number" lay-affix="number" name="taxTotalAmount" placeholder="" step="0.01" lay-precision="2" class="layui-input" lay-filter="calcAmount" lay-verify="required|number" value="{{ d.params.taxTotalAmount || '0.00' }}">
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label"><span style="color:red">*</span>总金额(含税)</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="number" lay-affix="number" name="taxInclusiveTotalAmount" readonly placeholder="" step="0.01" lay-precision="2" class="layui-input" lay-verify="required|number" value="{{ d.params.taxInclusiveTotalAmount || '0.00' }}">
                </script>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label billtong-myinvoice-typeinvatinvoice-label">开票人</label>
            <div class="layui-input-inline billtong-myinvoice-typeinvatinvoice-input">
                <script type="text/html" template>
                    <input type="text" name="drawerName" placeholder="请输入开票人" autocomplete="off" class="layui-input" lay-affix="clear" value="{{ d.params.drawerName || '' }}">
                </script>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <script type="text/html" template>
                <textarea placeholder="请输入备注" class="layui-textarea" name="remark">{{ d.params.remark || '' }}</textarea>
            </script>
        </div>
    </div>
    <div class="layui-form-item" style="margin-bottom:0 !important;">
        <div class="layui-inline">
            <label class="layui-form-label">项目明细</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="btnAdd" lay-on="add">
                    <i class="layui-icon layui-icon-add-1"></i> 添加明细
                </button>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <table class="layui-table" id="ID-table-myinvoice-typeinvatinvoiceform">
                    <colgroup>
                        <col width="300">
                    </colgroup>
                    <thead>
                        <tr>
                            <th><span style="color:red">*</span>项目名称</th>
                            <th>规格型号</th>
                            <th>单位</th>
                            <th>数量</th>
                            <th>单价</th>
                            <th><span style="color:red">*</span>金额</th>
                            <th><span style="color:red">*</span>税率</th>
                            <th><span style="color:red">*</span>税额</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!--初始时无任何行-->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="text-align:right;">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-primary layui-border" lay-on="cancel">取消</button>
            <button type="submit" class="layui-btn" lay-submit lay-filter="LAY-myinvoice-typeinvatinvoice-search">提交</button>
        </div>
    </div>
</div>

<script>
    var newRow = '<tr>' +
        '<td><input type="text" name="name" class="layui-input" placeholder="请输入项目名称" lay-verify="required"></td>' +
        '<td><input type="text" name="specification" class="layui-input" placeholder="请输入规格型号"></td>' +
        '<td><input type="text" name="unit" class="layui-input" placeholder="请输入单位"></td>' +
        '<td><input type="text" name="quantity" class="layui-input" placeholder="请输入数量"></td>' +
        '<td><input type="text" name="unitPrice" class="layui-input" placeholder="请输入单价"></td>' +
        '<td><input type="text" name="price" class="layui-input" placeholder="请输入金额" lay-verify="required|number"></td>' +
        '<td><input type="text" name="taxRate" class="layui-input" placeholder="请输入税率，例如：6%" lay-verify="required"></td>' +
        '<td><input type="text" name="tax" class="layui-input" placeholder="请输入税额" lay-verify="required|number"></td>' +
        '<td><button class="layui-btn layui-btn-sm layui-bg-red delete-row-btn"><i class="layui-icon layui-icon-delete"></i> 删除</button></td>' +
        '</tr>';

    // 定义一个 lay-done 对应的全局方法，以供动态模板执行
    layui.data.sendParams = function (params) {
        console.log(params) //得到传递过来的 id 参数（或其他参数）值

        // 通过得到的参数值，做一些你想做的事
        // 如果是编辑则依据项目明细数据初始化，如果是新增则插入一个空行
        let isUpdate = params.hasOwnProperty('id') && params.id > 0;
        if (isUpdate) {
            //判断是否有项目明细
            var hasVatProject = params.projectList != null && params.projectList.length > 0;
            if (hasVatProject) {
                for (var i = 0; i < params.projectList.length; i++) {
                    var updateRow = '<tr>' +
                        '<input type="hidden" name="project_id" value="' + params.projectList[i].id + '" />' +
                        '<td><input type="text" name="name" class="layui-input" placeholder="请输入项目名称" lay-verify="required" value="' + params.projectList[i].name + '"></td>' +
                        '<td><input type="text" name="specification" class="layui-input" placeholder="请输入规格型号" value="' + params.projectList[i].specification + '"></td>' +
                        '<td><input type="text" name="unit" class="layui-input" placeholder="请输入单位" value="' + params.projectList[i].unit + '"></td>' +
                        '<td><input type="text" name="quantity" class="layui-input" placeholder="请输入数量" value="' + params.projectList[i].quantity + '"></td>' +
                        '<td><input type="text" name="unitPrice" class="layui-input" placeholder="请输入单价" value="' + params.projectList[i].unitPrice + '"></td>' +
                        '<td><input type="text" name="price" class="layui-input" placeholder="请输入金额" lay-verify="required|number" value="' + params.projectList[i].price + '"></td>' +
                        '<td><input type="text" name="taxRate" class="layui-input" placeholder="请输入税率，例如：6%" lay-verify="required" value="' + params.projectList[i].taxRate + '"></td>' +
                        '<td><input type="text" name="tax" class="layui-input" placeholder="请输入税额" lay-verify="required|number" value="' + params.projectList[i].tax + '"></td>' +
                        '<td><button class="layui-btn layui-btn-sm layui-bg-red delete-row-btn"><i class="layui-icon layui-icon-delete"></i> 删除</button></td>' +
                        '</tr>';
                    $('#ID-table-myinvoice-typeinvatinvoiceform tbody').append(updateRow);
                }
            }
            else {
                $('#ID-table-myinvoice-typeinvatinvoiceform tbody').append(newRow);
            }
        }
        else {
            $('#ID-table-myinvoice-typeinvatinvoiceform tbody').append(newRow);
        }

        // 若需用到 layui 组件，layui.use 需写在该全局方法里面，如：
        //layui.use(['table'], function () {
        //    var table = layui.table;
        //    table.render({
        //        elem: '',
        //        url: 'url?id=' + params.id
        //    });
        //});
    };

    layui.use(['admin', 'table', 'form', 'util'], function () {
        var $ = layui.$
            , admin = layui.admin
            , setter = layui.setter
            , view = layui.view
            , table = layui.table
            , laydate = layui.laydate
            , util = layui.util
            , form = layui.form;

        // 日期
        laydate.render({
            elem: '#ID-laydate-typeinvatinvoice-issueDate',
            max: 0
        });

        //处理自定义事件
        util.on({
            clear: function () {
                console.log(this); // 当前触发事件的 DOM 元素

                $(':input[name=lotNo]').val('');
                $(':input[name=uploadTimeStart]').val('');
                $(':input[name=uploadTimeEnd]').val('');
                //form.render($('#ID-select-myinvoice-billtype'));

                //执行重载
                table.reload('LAY-myinvoice-viewresult-manage', {
                    where: {}
                });
            },
            add: function () {
                //添加项目明细
                $('#ID-table-myinvoice-typeinvatinvoiceform tbody').append(newRow);
            }
        });

        $(document).on('click', '.delete-row-btn', function () {
            //至少保留一行
            var trCount = $('#ID-table-myinvoice-typeinvatinvoiceform tbody tr').length;
            if (trCount <= 1) {
                return false;
            }
            $(this).closest('tr').remove();
        });

        function calcTaxInclusiveTotalAmount() {
            // 为前两个文本框添加输入事件监听器
            $(':input[name=taxExclusiveTotalAmount], :input[name=taxTotalAmount]').on('input', function () {
                // 获取前两个文本框的值，并转换为数字
                var value1 = parseFloat($(':input[name=taxExclusiveTotalAmount]').val()) || 0;
                var value2 = parseFloat($(':input[name=taxTotalAmount]').val()) || 0;

                // 计算总和
                var sum = value1 + value2;

                // 将总和赋值给第三个文本框，并保留两位小数
                $(':input[name=taxInclusiveTotalAmount]').val(sum.toFixed(2));
            });
        }
        calcTaxInclusiveTotalAmount();

        //点缀事件
        form.on('input-affix(calcAmount)', function (data) {
            // 获取前两个文本框的值，并转换为数字
            var value1 = parseFloat($(':input[name=taxExclusiveTotalAmount]').val()) || 0;
            var value2 = parseFloat($(':input[name=taxTotalAmount]').val()) || 0;

            // 计算总和
            var sum = value1 + value2;

            // 将总和赋值给第三个文本框，并保留两位小数
            $(':input[name=taxInclusiveTotalAmount]').val(sum.toFixed(2));
        });

    });
</script>